<template>
    <el-card>
        <p class="page-title">居民详情</p>
        
        {{ residentSignDetailData }}
         <el-tabs type="border-card">
    <el-tab-pane label="健康档案">
        <HealthFile :residentDetailData="residentDetailData"/>
    </el-tab-pane>
    <el-tab-pane label="健康记录">
        <HealthRecord />
    </el-tab-pane>
    <el-tab-pane label="签约信息">
        <SignMes :residentDetailData="residentDetailData"/>
    </el-tab-pane>
    <el-tab-pane label="服务记录">
        <ServiceRecord :residentDetailData="residentDetailData"/>
    </el-tab-pane>
  </el-tabs>
    </el-card>
</template>

<script setup>
import { useRoute } from 'vue-router';
import HealthFile from './tabs/HealthFile.vue';
import { getResidentsDetailApi } from '../../../api/residents';
import { onMounted, ref } from 'vue';
import HealthRecord from './tabs/HealthRecord.vue';
import SignMes from './tabs/SignMes.vue';
import ServiceRecord from './tabs/ServiceRecord.vue';
import { findSignsDetailApi } from '../../../api/signs';

const route = useRoute();
const residentDetailData = ref([])
const residentSignDetailData = ref()

// 查询签约详情
function findResidentSignDetailData(){
    findSignsDetailApi({_id:route.query._id}).then(res=>{
        // console.log(res);
        
        if(res.code==200){
            residentSignDetailData.value=res.data;
            console.log('residentSignDetail',residentSignDetailData);
            
        }
    })
}

onMounted(()=>{
    getResidentsDetail();
    findResidentSignDetailData();
})

function getResidentsDetail(){
    getResidentsDetailApi({
        _id:route.query._id
    }).then(res=>{
        if(res.code==200){
            residentDetailData.value = res.data;
        }
    })
}
</script>

<style scoped>
.page-title {
    padding-left: 20px;
    margin-left: 10px;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

.page-title::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background-color: #2984f8;
}

.el-tabs {
    --el-tabs-header-height: 48px;
    border: none;
}
</style>

<style>
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: var(--primary-color);
    color: #fff;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
    background-color: #F2F7Fb;
    color: var(--primary-color);
    width: 125px;
    height: 48px;
    font-weight: 400;
}
</style>